<template>
  <div>toRefs的使用</div>
  <!-- <h3>name:{{ state.name }}</h3>
  <h3>age:{{ state.age }}</h3> -->
  <h3>name:{{ name }}</h3>
  <h3>age:{{ age }}</h3>
  <hr>
  <h3>name:{{ name2 }}</h3>
  <h3>age:{{ age2 }}</h3>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'

function useFeatureX() {
  const state = reactive({
    name2: '自来也',
    age2: 47
  })
  return {
    ...toRefs(state)
  }
}
export default defineComponent({
  name: 'App',
  setup() {
    const state = reactive({
      name: '自来也',
      age: 47
    })
    // toRefs可以把一个响应式对象转为普通对象,该普通对象中的每个property都是一个ref
    const { name, age } = toRefs(state)

    // 定时器,更新数据,如果数据变化了,界面也会随之变化,肯定是响应式i数据
    setInterval(() => {
      // state.name += '=='
      // name.value += '==='
      // console.log(2);
    }, 1000)

    const { name2, age2 } = useFeatureX()
    return {
      // state,
      // ...state // 不是响应式数据了--->{name:'自来也',age:47} 解构了
      // ...state2 // toRefs返回来的对象
      name, age,
      name2, age2
    }
  }
})
</script>